<template>
  <div class="container">

    <div class="box demo1">
      <p>{{this.switchStatus}}</p>
      <m-switch v-model="switchStatus.checked1"></m-switch>
      <m-switch v-model="switchStatus.checked2" disabled></m-switch>
      <m-switch v-model="switchStatus.checked3" disabled></m-switch>
      <m-switch v-model="switchStatus.checked4" active-value="on" inactive-value="off"></m-switch>
      <m-switch v-model="switchStatus.checked5" active-value="on" inactive-value="off" active-color="#03B976"></m-switch>
      <m-switch v-model="switchStatus.checked5" active-value="on" inactive-value="off" active-color="#03B976" size="small"></m-switch>
      <m-switch v-model="switchStatus.checked5" active-value="on" inactive-value="off" active-color="#03B976" size="mini"></m-switch>
      <m-switch v-model="switchStatus.checked1" type="material"></m-switch>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      switchStatus: {
        checked1: false,
        checked2: false,
        checked3: true,
        checked4: 'one',
        checked5: 'on'
      }
    }
  }
}
</script>
<style>
  .demo1 .m-switch {
    margin-right: 10px;
  }
</style>
